<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <!-- import CSS -->
        <link rel="stylesheet" href="element_index.css">
        <link rel="stylesheet" href="index.css">
    </head>
<body>
    <div id="app">
    <el-container>
        <el-header>
            <div class="title">CURD自动生成器</div>
            <el-form :inline="true" size="mini" style="margin-top:10px" >
                <el-form-item>
                    <el-button type="primary" @click="getTables">查询表</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="generateZip" :disabled="!btnEnable">生成压缩包</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="generateFile" :disabled="!btnEnable">生成到配置目录</el-button>
                </el-form-item>
            </el-form>
        </el-header>

        <el-main>
            <el-table :data="tableData" size="mini" style="width: 100%;" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="name" label="表名"></el-table-column>
                <el-table-column prop="engine" label="引擎"/></el-table-column>
                <el-table-column prop="type" label="类型"/></el-table-column>
                <el-table-column prop="schema" label="模式"/></el-table-column>
                <el-table-column prop="comment" label="说明"/></el-table-column>
                <el-table-column prop="createTime" label="创建时间"/></el-table-column>
            </el-table>
        </el-main>

        <el-footer style="bottom: 0px;position: absolute;width: 100%;">Copyright @fengt</el-footer>
    </el-container>

  </div>
</body>
    <script src="vue2.6.12.js"></script>
    <script src="jquery2.0.0.min.js" ></script>
    <script src="elementui2.14.1.js"></script>
    <script>
        let vm = new Vue({
        el: '#app',
        data: {
            baseUrl: "http://localhost/",
            loading: false,
            btnEnable: false,
            tableData: [],
            selectionTables: []
        },
        methods: {
            getTables () {
                var that = this
                $.ajax({
                    url : this.baseUrl + 'tables',
                    type : "POST",
                    contentType: "application/json;charset=utf-8",
                    dataType : "json",
                    success : function(result) {
                        if (result && result.ok) {
                            that.tableData = result.tables
                        } else {
                            that.tableData = []
                        }
                    },
                    error:function(msg){
                        that.$message({
                            message: '表查询失败, ' + msg.responseText,
                            type: 'error'
                        })
                    }
                })
            },
            generateZip () {
                if (this.selectionTables.length > 0) {
                // 此处不能使用$.ajax请求，因为ajax的流将会作为responseText(String)类型返回，无法触发浏览器文件下载机制。因此此处改用xmlhttprequest  + blob的方式下载文件
                    var that = this
                    var xhr = new XMLHttpRequest();
                    xhr.open('POST', this.baseUrl + 'generate/zip', true);//get请求，请求地址，是否异步
                    xhr.setRequestHeader('content-type', 'application/json');
                    xhr.responseType = "blob";    // 返回类型blob
                    xhr.onload = function () {// 请求完成处理函数
                        if (this.status === 200) {
                            var blob = this.response;// 获取返回值
                            var a = document.createElement('a');
                            a.download = 'GeneratorTableCode.zip';
                            a.href=window.URL.createObjectURL(blob);
                            a.click();
                        }
                    };
                    // 发送ajax请求
                    xhr.send(JSON.stringify(that.selectionTables));
                }
            },
            generateFile () {
                if (this.selectionTables.length > 0) {
                    var that = this
                    $.ajax({
                        url : this.baseUrl + 'generate/file',
                        type : "POST",
                        contentType: "application/json;charset=utf-8",
                        data:  JSON.stringify(that.selectionTables),
                        dataType : "json",
                        success : function(result) {
                            if (result && result.ok) {
                                that.$message({
                                    message: '生成完成',
                                    type: 'success'
                                })
                            } else {
                                that.$message({
                                    message: '生成文件失败',
                                    type: 'error'
                                })
                            }
                        },
                        error:function(msg){
                            that.$message({
                                message: '生成文件失败',
                                type: 'error'
                            })
                        }
                    })
                }
            },
            handleSelectionChange (val) {
                var that = this
                that.selectionTables = []
                if (val) {
                    val.forEach(e => {
                        that.selectionTables.push(e.name)
                    })
                }
                console.log(this.selectionTables)
                this.btnEnable = this.selectionTables.length > 0
            }
        }
        })
    </script>
</html>